<template>
  <h1 v-show="sum">当前求和结果{{ sum }}</h1>
  <br />
  <button @click="sum++">sum+1</button>
  <hr />
  <h1 v-show="msg">当前信息：{{ msg }}</h1>
  <br />
  <button @click="msg += '@'">信息修改</button>
  <hr />
  <h1 v-show="person.name">姓名:{{ person.name }}</h1>
  <br />
  <h1 v-show="person.age">年龄:{{ person.age }}</h1>
  <br />
  <h1 v-show="person.job.salary">薪资:{{ person.job.salary }}K</h1>
  <br />
  <button @click="person.name += '~'">姓名修改</button>
  <button @click="person.age++">年龄增加</button>
  <button @click="person.job.salary++">薪资++</button>
</template>

<script>
import { ref, reactive, watch } from "vue";
export default {
  name: "Demo",
  setup() {
    // 数据
    let sum = ref(0);
    let msg = ref("你好啊");
    let person = reactive({
      name: "Shier",
      age: 19,
      job: {
        job1: "全栈",
        salary: 88,
      },
    });

    // 情况一：监视ref定义的响应式数据
    /* watch(sum, (newVal, oldVal) => {
      console.log('sum数据变化了', newVal, oldVal);
    }, { immediate: true }) */
    // 情况二：监视多个ref定义的响应式数据
    /* watch([sum, msg], (newVal, oldVal) => {
      console.log('[sum, msg]数据变化了', newVal, oldVal);
    }, { immediate: true }) */
    /* 情况三：监视reactive定义的响应式数据(也就是监视的是person整个对象，则会自动强制开启深度监视)
            若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue！！
            若watch监视的是reactive定义的响应式数据，则强制开启了深度监视 
    */
    /* watch(person, (newValue, oldValue) => {
      console.log('person变化了', newValue, oldValue)
    }, {immediate: true, deep: false}) */ //此处的deep配置不再奏效

    // 特殊****
    // 情况四：监视reactive定义的响应式数据中的某个属性——————特殊情况，此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效
    // 此时deep有效，但oldValue依旧无效
    /* watch(
      () => person.job,
      (newValue, oldValue) => {
        console.log("person的job变化了", newValue, oldValue);
      },
      { immediate: true, deep: true }
    ); */

    // 情况五：监视reactive定义的响应式数据中的某 些 属性
    /* watch(
      [() => person.job, () => person.name],
      (newValue, oldValue) => {
        console.log("person的job变化了", newValue, oldValue);
      },
      { immediate: true, deep: true }
    ); */

    // 返回一个对象（常用）
    return {
      sum,
      msg,
      person,
    };
  },
};
</script>

<style>
</style>
